<template>
  <el-card>
    <template #header>
      <el-row justify="space-between" align="middle">
        <el-col :span="12" style="font-size: 35px;color: #3f87f8;text-align: left">影片列表</el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" size="large" :icon="Plus" @click="handleAdd">创建</el-button>
        </el-col>
      </el-row>
    </template>
    <el-table :data="movieList" stripe style="width: 100%" border v-loading="loading">
      <el-table-column align="center" prop="movieId" label="编号" width="60"></el-table-column>
      <el-table-column align="center" prop="movieImage" label="封面" width="120">
        <template #default="scope">
          <el-image :src="scope.row.movieImage"></el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="movieName" label="电影名称"></el-table-column>
      <el-table-column align="center" prop="movieDirector" label="导演">
        <template #default="scope">
                  <span v-for="(item,index) in scope.row.movieDirector">
                    <el-tag style="padding: 2px">{{ item }}</el-tag>
                  </span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="movieActor" label="主演">
        <template #default="scope">
                  <span v-for="(item,index) in scope.row.movieActor">
                    <el-tag style="padding: 2px">{{ item }}</el-tag>
                  </span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="movieDuration" label="时长/分"></el-table-column>
      <el-table-column align="center" prop="movieShowTime" label="上映时间"></el-table-column>
      <el-table-column align="center" prop="movieGrade" label="评分">
        <template #default="scope">
          <el-rate
              v-model="scope.row.movieGrade"
              disabled
              show-score
              text-color="#ff9900"
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" width="200">
        <template #header>
          <el-input v-model="searchKey" size="small" placeholder="搜索影片编号或名称">
            <template #append>
              <el-button :icon="Search" @click="handleSearch"/>
            </template>
          </el-input>
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleAddSession(scope.$index,scope.row)" type="primary">排片</el-button>
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)" type="warning">编辑</el-button>
          <el-popconfirm title="确定要删除此影片吗?"
                         @confirm="handleDelete(scope.$index, scope.row)">
            <template #reference>
              <el-button
                  size="small"
                  type="danger">删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :hide-on-single-page="pageInfo.total/pageInfo.pageSize<=1"
        v-model:currentPage="pageInfo.pageNum"
        v-model:page-size="pageInfo.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
  </el-card>

  <el-dialog @close="getMovieList" top="5vh" width="660px" v-model="addDialogVisible"
             :close-on-click-modal="false" title="添加电影">
    <ZzjMovieAddEdit :movie-info="undefined"></ZzjMovieAddEdit>
  </el-dialog>
  <el-dialog @close="getMovieList" top="5vh" width="660px" v-model="editDialogVisible"
             :close-on-click-modal="false" title="编辑电影" :destroy-on-close="true">
    <ZzjMovieAddEdit :movie-info="editMovieInfo"></ZzjMovieAddEdit>
  </el-dialog>


  <div>
    <el-row justify="space-around">
      <el-col v-for="(item,index) in movieList" :key="index" :span="7">
        <el-card style="margin-bottom: 15px;--el-card-padding: 0">
          <el-image :src="item.movieImage" style="height: 150px;"/>
          <div>
            <el-descriptions :title="'上映时间：'+item.movieShowTime"     :column="1">
              <el-descriptions-item label="电影名">{{  item.movieName }}</el-descriptions-item>
              <el-descriptions-item label="导演"> {{ item.movieDirector }}</el-descriptions-item>
              <el-descriptions-item label="主演">{{  item.movieActor }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {Plus, Search} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import api from "../../../api/api";
import ZzjMovieAddEdit from "./ZzjMovieAddEdit.vue";
import router from "../../../router";

const pageInfo = ref({
  pageSize: 5,
  pageNum: 1,
  total: 0
})
const searchKey = ref('')
const movieList = ref()
const addDialogVisible = ref(false)
const editDialogVisible = ref(false)
const editMovieInfo = ref()
const loading = ref(false)

onMounted(() => {
  getMovieList()
})

const handleAdd = () => {
  addDialogVisible.value = true
}
const handleEdit = (index: number, row: any) => {
  editMovieInfo.value = row
  editDialogVisible.value = true
}
const handleAddSession = (index: number, row: any) => {
  router.push({
    path: "/addSession/" + row.movieId,
  });
}
const getMovieList = () => {
  loading.value = true
  api.movie.getMovieList({
    pageSize: pageInfo.value.pageSize,
    pageNum: pageInfo.value.pageNum,
    searchKey: searchKey.value
  }).then(res => {
    if (res.data.code == 0) {
      movieList.value = res.data.data.list
      pageInfo.value.total = res.data.data.count
      movieList.value.forEach((item: {
        movieDirector: string; movieActor: string;
      }) => {
        item.movieActor = eval('(' + item.movieActor + ')')
        item.movieDirector = eval('(' + item.movieDirector + ')')
      })
    }
    loading.value = false
  })
}

const handleSizeChange = (val: number) => {
  pageInfo.value.pageSize = val
  getMovieList()
}
const handleCurrentChange = (val: number) => {
  pageInfo.value.pageNum = val
  getMovieList()
}
const handleSearch = () => {
  getMovieList()
}

const handleDelete= ($index: number | string, row: any)=>{

}
</script>

<style scoped>

</style>
